<template>
  <div class="Historical">
    <!-- 加载loading -->
    <div class="loading" v-if="loading">
      <div class="loading-icon">
        <mu-circular-progress class="demo-circular-progress" color="secondary" :size="36"></mu-circular-progress>
        <div class="font">加载中，请稍等</div>
      </div>
    </div>
    <!-- 排名 -->
    <div class="navbar">
    <!-- 选择框 -->
    <div class="navbar-select">
      <!-- <mu-select v-model="sity" full-width>
        <mu-option v-for="option in options" :key="option.index" :label="option.name" :value="option"></mu-option>
      </mu-select> -->
      <select name="selectAge" id="selectAge" ref="inputDivision" @change="handleClick">
        <option v-for="option in options" :key="option.index" :value="option.id" :data-id='option.id'>{{option.name}}</option>
      </select>
    </div>
    <!-- 榜单 -->
    <div class="list-bar">
      <!-- 第二名 -->
      <mu-paper class="demo-paper" :z-depth="2">
        <div class="top">
          <div class="top-img">
            <div class="img">
              <img :src="secondImg" alt="">
            </div>
          </div>
          <div class="top-num"><font>{{secondTicket}}</font>票</div>
          <div class="top-name">
            <font>{{secondName}}</font>
            <font>{{secondPoint}}号</font>
          </div>
        </div>
      </mu-paper>
      <!-- 第一名 -->
      <mu-paper class="demo-paper" :z-depth="5">
        <div class="top-1">
          <div class="top-img">
            <div class="img">
              <img :src="firstImg" alt="">
            </div>
          </div>
          <div class="top-num"><font>{{firstTicket}}</font>票</div>
          <div class="top-name">
            <font>{{firstName}}</font>
            <font>{{firstPoint}}号</font>
          </div>
        </div>
      </mu-paper>
      <!-- 第三名 -->
      <mu-paper class="demo-paper" :z-depth="2">
        <div class="top-2">
          <div class="top-img">
            <div class="img">
              <img :src="thirdImg" alt="">
            </div>
          </div>
          <div class="top-num"><font>{{thirdTicket}}</font>票</div>
          <div class="top-name">
            <font>{{thirdName}}</font>
            <font>{{thirdPoint}}号</font>
          </div>
        </div>
      </mu-paper>
    </div>
  </div>
  <!-- 月周榜 -->
  <div class="list">
    <mu-container>
      <mu-tabs :value.sync="active1" inverse color="secondary" text-color="rgba(0, 0, 0, .54)"  center>
        <mu-tab @click='weeksList'>周榜</mu-tab>
        <mu-tab @click='monthList'>月榜</mu-tab>
      </mu-tabs>
      <div class="demo-text" v-if="active1 === 0">
        <div class="time-select">
          <select name="" @change="handleTimeClick">
            <option v-for='time in times' :key='time.index' :value="time.id" :data-id='time.id'>
              {{time.name}}
            </option>
          </select>
        </div>
        <!-- 列表 -->
        <div class="items">
          <div class="item" v-for="(list,index) in lists" :key="list.index"  @click="LinkTo('/personal', list.id)">
            <div class="item-num">{{index+1}}</div>
            <div class="item-img">
              <img :src="list.after_image" alt="">
            </div>
            <div class="item-name">{{list.name}}</div>
            <div class="item-ticket">
              <div class="num1">{{list.num}}<font>票</font></div>
              <div class="num2">{{list.id}}<font>号</font></div>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-text" v-if="active1 === 1">
        <div class="time-select">
          <select name="" @change="handleTimeClicks">
            <option v-for='time in times' :key='time.index' :value="time.id" :data-id='time.id'>
              {{time.name}}
            </option>
          </select>
        </div>
        <!-- 列表 -->
        <div class="items">
          <div class="item" v-for="(list,index) in list2s" :key="list.index">
            <div class="item-num">{{index+1}}</div>
            <div class="item-img">
              <img :src="list.after_image" alt="">
            </div>
            <div class="item-name">{{list.name}}</div>
            <div class="item-ticket">
              <div class="num1">{{list.num}}<font>票</font></div>
              <div class="num2">{{list.id}}<font>号</font></div>
            </div>
          </div>
        </div>
      </div>
    </mu-container>
  </div>
  <!-- 底部导航 -->
  <div class="kong"></div>
  <bottomBar :toSelected='proValue'></bottomBar>
</div>
</template>
<script>
import bottomBar from "../components/bottomBar.vue";
import http from "../utils/http";
export default {
  name: "Historical",
  data() {
    return {
      addressId: '',
      timeId: "9",
      selectName: '',
      active1: 1,
      options: [],
      firstImg: "",
      firstTicket: "",
      firstName: "",
      firstPoint: "",
      secondImg: "",
      secondTicket: "",
      secondName: "",
      secondPoint: "",
      thirdImg: "",
      thirdTicket: "",
      thirdName: "",
      thirdPoint: "",
      times: [],
      lists: [],
      list2s: [],
      proValue: "List",
      loading: false
    };
  },
  methods: {
    LinkTo: function(link, index) {
      // console.log('event',event)
      // console.log('link', link);
      // console.log(link,index);
      // return false
      this.$router.push({
        path: link,
        query: {
          candidates_id: index
        }
      });
    },
    // 选择地区
    handleClick: function(event) {
      this.loading = true
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      var dataId = event.target.value;
      // console.log("dataId", dataId);
      this.addressId = dataId;
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            division_id: this.addressId,
            sortlist_type: 2
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectListSortData"
        })
        .then(function(response) {
          // console.log("历史榜单接口", response);
          if (response.errcode == 0) {
            // 历史榜单接口
            if (response.data.length >= 3) {
              that.list2s = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = response.data[2].after_image;
              that.thirdTicket = response.data[2].num;
              that.thirdName = response.data[2].name;
              that.thirdPoint = response.data[2].id;
            } else if (response.data.length >= 2) {
              that.list2s = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else if (response.data.length >= 1) {
              that.list2s = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else {
              that.list2s = response.data;
              that.firstImg = null;
              that.firstTicket = null;
              that.firstName = null;
              that.firstPoint = null;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            }
          }
          that.active1 = 1;
          that.monthList();
          that.loading = false
        })
        .catch(function(error) {
          // console.log("error", error);
          that.loading = false
        });
    },
    // 选择时间
    handleTimeClick: function(event) {
      this.loading = true
      var dataTimeId = event.target.value;
      // console.log("dataTimeId", dataTimeId);
      this.timeId = dataTimeId;
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            division_id: that.addressId,
            sortlist_type: 3
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectListSortData"
        })
        .then(function(response) {
          // console.log("历史榜单接口", response);
          if (response.errcode == 0) {
            // 历史榜单接口
            if (response.data.length >= 3) {
              that.list2s = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = response.data[2].after_image;
              that.thirdTicket = response.data[2].num;
              that.thirdName = response.data[2].name;
              that.thirdPoint = response.data[2].id;
            } else if (response.data.length >= 2) {
              that.list2s = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else if (response.data.length >= 1) {
              that.list2s = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else {
              that.list2s = response.data;
              that.firstImg = null;
              that.firstTicket = null;
              that.firstName = null;
              that.firstPoint = null;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            }
          }
          that.active1 = 0;
          that.weeksList();
          that.loading = false
        })
        .catch(function(error) {
          // console.log("error", error);
          that.loading = false
        });
    },
    // 选择时间
    handleTimeClicks: function(event) {
      this.loading = true
      var dataTimeId = event.target.value;
      // console.log("dataTimeId", dataTimeId);
      this.timeId = dataTimeId;
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            division_id: that.addressId,
            sortlist_type: 2
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectListSortData"
        })
        .then(function(response) {
          // console.log("历史榜单接口", response);
          if (response.errcode == 0) {
            // 历史榜单接口
            if (response.data.length >= 3) {
              that.list2s = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = response.data[2].after_image;
              that.thirdTicket = response.data[2].num;
              that.thirdName = response.data[2].name;
              that.thirdPoint = response.data[2].id;
            } else if (response.data.length >= 2) {
              that.list2s = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else if (response.data.length >= 1) {
              that.list2s = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else {
              that.list2s = response.data;
              that.firstImg = null;
              that.firstTicket = null;
              that.firstName = null;
              that.firstPoint = null;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            }
          }
          that.active1 = 1;
          that.monthList();
          that.loading = false
        })
        .catch(function(error) {
          // console.log("error", error);
          that.loading = false
        });
    },
    
    // 点击周
    weeksList: function() {
      this.loading = true
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      // 时间日期接口
      http
        .post("Zmhf/index", {
          data: {
            sortlist_type: 3
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectLogTimeData"
        })
        .then(function(response) {
          // console.log(response);
          // console.log("时间", response.data);
          if (response.errcode == 0) {
            that.times = response.data;
            that.loading = false
          }
        })
        .catch(function(error) {
          that.loading = false
          // console.log("error", error);
        });
      // 历史榜单接口
      http
        .post("Zmhf/index", {
          data: {
            division_id: this.addressId, //赛区Id
            sortlist_type: 3, //榜单类型
            weektime_id: this.timeId //选择时间_id
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectListSortDataLog"
        })
        .then(function(response) {
          // console.log("榜单", response.data);
          if (response.errcode == 0) {
            if (response.data.length >= 3) {
              that.lists = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = response.data[2].after_image;
              that.thirdTicket = response.data[2].num;
              that.thirdName = response.data[2].name;
              that.thirdPoint = response.data[2].id;
            } else if (response.data.length >= 2) {
              that.lists = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else if (response.data.length >= 1) {
              that.lists = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else {
              that.lists = response.data;
              that.firstImg = null;
              that.firstTicket = null;
              that.firstName = null;
              that.firstPoint = null;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            }
          that.loading = false
          }
        })
        .catch(function(error) {
          // console.log("error", error);
          that.loading = false
        });
    },
    // 点击月
    monthList: function() {
      this.loading = true
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      // 时间日期接口
      http
        .post("Zmhf/index", {
          data: {
            sortlist_type: 2
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectLogTimeData"
        })
        .then(function(response) {
          // console.log("时间", response.data);
          if (response.errcode == 0) {
            that.times = response.data;
            that.loading = false
          }
        })
        .catch(function(error) {
          that.loading = false
          // console.log("error", error);
        });
      // 历史榜单接口
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      http
        .post("Zmhf/index", {
          data: {
            division_id: this.addressId, //赛区Id
            sortlist_type: 2, //榜单类型
            weektime_id: this.timeId //选择时间_id
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectListSortDataLog"
        })
        .then(function(response) {
          // console.log("榜单", response.data);
          if (response.data.length >= 3) {
            that.list2s = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = response.data[2].after_image;
            that.thirdTicket = response.data[2].num;
            that.thirdName = response.data[2].name;
            that.thirdPoint = response.data[2].id;
          } else if (response.data.length >= 2) {
            that.list2s = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else if (response.data.length >= 1) {
            that.list2s = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else {
            that.list2s = response.data;
            that.firstImg = null;
            that.firstTicket = null;
            that.firstName = null;
            that.firstPoint = null;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          }
          that.loading = false
        })
        .catch(function(error) {
          that.loading = false
          // console.log("error", error);
        });
    }
  },
  components: {
    bottomBar
  },
  created() {
    this.loading = false
    var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // console.log('res',res)
    let that = this;
    // 地区下拉列表
    http
      .post("Zmhf/index", {
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectDivisionData"
      })
      .then(function(response) {
        // console.log("地区", response);
        if (response.status == 0) {
          that.$router.push({
            path: '/'
          });
        }
        if (response.errcode == 0) {
          that.options = response.data;
          that.sity = response.data[0];
          that.loading = false
        }
      })
      .catch(function(error) {
        // console.log(error);
        that.loading = false
      });
    // 时间日期接口
    http
      .post("Zmhf/index", {
        data: {
          sortlist_type: 2
        },
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectLogTimeData"
      })
      .then(function(response) {
        // console.log("时间", response.data);
        if (response.errcode == 0) {
          that.times = response.data;
          that.loading = false
        }
      })
      .catch(function(error) {
        // console.log("error", error);
        that.loading = false
      });
    // 历史榜单接口
    http
      .post("Zmhf/index", {
        data: {
          division_id: this.addressId, //赛区Id
          sortlist_type: 2, //榜单类型
          weektime_id: this.timeId //选择时间_id
        },
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectListSortDataLog"
      })
      .then(function(response) {
        // console.log("榜单", response.data);
        if (response.errcode == 0) {
          if (response.data.length >= 3) {
            that.list2s = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = response.data[2].after_image;
            that.thirdTicket = response.data[2].num;
            that.thirdName = response.data[2].name;
            that.thirdPoint = response.data[2].id;
          } else if (response.data.length >= 2) {
            that.list2s = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else if (response.data.length >= 1) {
            that.list2s = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else {
            that.list2s = response.data;
            that.firstImg = null;
            that.firstTicket = null;
            that.firstName = null;
            that.firstPoint = null;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          }
          that.loading = false
        }
      })
      .catch(function(error) {
        // console.log("error", error);
        that.loading = false
      });
  }
};
</script>
<style lang="scss" scoped>
.Historical {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: fixed;
    width: 100%;
    height: 95%;
    z-index: 3000;
    .loading-icon {
      width: 100%;
      .font {
        display: block;
        width: 100%;
        color: #ff3f81;
        font-weight: 500;
        font-size: 13px;
      }
    }
  }
  .navbar {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: 17rem;
    background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/bgImges.png?x-oss-process=image/quality,Q_70");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .navbar-select {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin: 1rem 0 0 0;
      width: 100%;
      height: 2rem;
      select {
        padding-left: 1rem;
        width: 7rem;
        height: 100%;
        outline: none;
        border: 0;
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        color: red;
        background-color: rgba(226, 204, 204, 0.6);
      }
    }

    .list-bar {
      display: inline-flex;
      justify-content: center;
      align-items: flex-end;
      width: 100%;
      height: 12rem;
      .demo-paper {
        width: 7rem;
        height: 10rem;
        &:nth-of-type(1) {
          border-top-left-radius: 1rem;
          border-bottom-left-radius: 1rem;
        }
        &:nth-of-type(2) {
          height: 11.5rem;
          border-top-left-radius: 1rem;
          border-top-right-radius: 1rem;
        }
        &:nth-of-type(3) {
          border-top-right-radius: 1rem;
          border-bottom-right-radius: 1rem;
        }
        .top {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;
          .top-img {
            margin-top: 0.5rem;
            position: relative;
            display: flex;
            justify-content: center;
            width: 5rem;
            height: 5rem;
            background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/2.png");
            background-repeat: no-repeat;
            background-size: 3.5rem;
            background-position: center;
            overflow: hidden;
            .img {
              position: absolute;
              bottom: 0.1rem;
              width: 3.2rem;
              height: 3.2rem;
              border-radius: 5rem;
              overflow: hidden;
              img {
                width: 100%;
              }
            }
          }
          .top-num {
            width: 100%;
            font-size: 0.8rem;
            font {
              color: #ff6464;
              font-size: 1.2rem;
            }
          }
          .top-name {
            width: 100%;
            font {
              display: block;
              font-size: 0.9rem;
              &:nth-of-type(2) {
                color: #aaa;
              }
            }
          }
        }
        .top-1 {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;
          .top-img {
            margin-top: 0.5rem;
            position: relative;
            display: flex;
            justify-content: center;
            width: 5rem;
            height: 6.5rem;
            background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/1.png");
            background-repeat: no-repeat;
            background-size: 4.5rem;
            background-position: center;
            .img {
              position: absolute;
              bottom: 0.1rem;
              width: 4.25rem;
              height: 4.25rem;
              border-radius: 5rem;
              overflow: hidden;
              img {
                width: 100%;
              }
            }
          }
          .top-num {
            width: 100%;
            font-size: 0.8rem;
            font {
              color: #ff6464;
              font-size: 1.2rem;
            }
          }
          .top-name {
            width: 100%;
            font {
              display: block;
              font-size: 0.9rem;
              &:nth-of-type(2) {
                color: #aaa;
              }
            }
          }
        }
        .top-2 {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;
          .top-img {
            margin-top: 0.5rem;
            position: relative;
            display: flex;
            justify-content: center;
            width: 5rem;
            height: 5rem;
            background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/3.png");
            background-repeat: no-repeat;
            background-size: 3.5rem;
            background-position: center;
            .img {
              position: absolute;
              bottom: 0.1rem;
              width: 3.2rem;
              height: 3.2rem;
              border-radius: 5rem;
              overflow: hidden;
              img {
                width: 100%;
              }
            }
          }
          .top-num {
            width: 100%;
            font-size: 0.8rem;
            font {
              color: #ff6464;
              font-size: 1.2rem;
            }
          }
          .top-name {
            width: 100%;
            font {
              display: block;
              font-size: 0.9rem;
              &:nth-of-type(2) {
                color: #aaa;
              }
            }
          }
        }
      }
    }
  }
  .list {
    width: 100%;
    margin-bottom: 4.5rem;
    .time-select {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 5rem;
      select {
        padding-left: 1rem;
        width: 90%;
        height: 2.8rem;
        background-color: #fff;
        border-radius: 0.5rem;
        border: 0.1rem #e6e6e6 solid;
        color: #777;
      }
    }
    .items {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 100%;
      .item {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 5rem;
        border-bottom: 0.1rem solid #e6e6e6;
        .item-num {
          width: 3rem;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          color: #000;
          font-size: 1rem;
        }
        .item-img {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          img {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            border: 0.2rem solid #e9c56e;
          }
        }
        .item-name {
          padding-left: 1rem;
          width: 10rem;
          height: 3rem;
          line-height: 3rem;
          text-align: left;
          color: #000;
          font-size: 1rem;
        }
        .item-ticket {
          padding-right: 1.5rem;
          width: 5rem;
          height: 5rem;
          .num1 {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            width: 100%;
            height: 2.5rem;
            color: #ff6464;
            font-size: 1.2rem;
            font {
              color: #000;
              font-size: 0.8rem;
            }
          }
          .num2 {
            display: flex;
            align-items: flex-start;
            justify-content: flex-end;
            width: 100%;
            height: 2.5rem;
            color: #000;
            font-size: 0.8rem;
          }
        }
      }
    }
  }
}
</style>
